<template>
  <div class="dialogBox" :msg="msg" :confirmBtn = 'confirmBtn'>
    <div class="cover" v-show="showCover"></div>
    <transition name="slide">
      <div class="window" v-show="show">
        <button class="closeWindow" @click="hide">
          <img src="../common/imgs/cha.png" alt="关闭">
        </button>
        <span class="toastText" v-html="reminderInfo">
<!--          {{reminderInfo}}-->
        </span>
        <div class="setting">
          <button class="cancel" @click.stop="hide">取消</button>
          <button class="yellowbtn sure" @click.stop="callback">{{submitTxt}}</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
    export default {
    // import DiaLog from '../../components/dialog';
    // <dia-log ref="dl" msg="为保障您的账户安全，充值之前请先进行实名校验" @confirm="sure()" @cancel="cancel()"></dia-log>
    // 显示方法：this.$refs.dl.dialogShow();
        name: "DiaLog",
        data(){
            return{
                introduce:'会话弹窗',
                show:false,
                showCover:false,
                reminderInfo:'',
                timeout:'',//定时器
                submitTxt : ''
            }
        },
        props: {
          'msg': {
                /*组件中配置的提示文字*/
                type: String,
                default: '提示文字'
            },
          'confirmBtn':{
            /*确定按钮文字*/
            type: String,
            default: '确定'
          }
        },
        mounted() {
          this.reminderInfo = this.msg ? this.msg  : '提示文字';
          this.submitTxt = this.confirmBtn ? this.confirmBtn  : '确定';
          this.$emit('success');
        },
        methods:{
            changeToast(mes){
              //动态改变提示信息
              // this.$refs.dl.changeToast('aaaa');
              if( mes ){
                this.reminderInfo = mes;
              }
            },
            callback(){
                /*点击确定*/
                this.hide();
                this.$emit('confirm'); /*组件调用方法： @confirm='function'*/
            },
            hide(){
                /*隐藏弹窗*/
              let thiz = this;
              this.$emit('cancel'); /*组件调用方法： @cancel='function'*/
              this.show = false;
                thiz.timeout = setTimeout(function () {
                    thiz.showCover = false;
                    clearTimeout(thiz.timeout);
                    thiz.timeout = null;
                },200);
               // thiz.canScroll();/*关闭弹窗，让页面可以上下移动*/
            },
            dialogShow(){
                /*显示弹窗*/
                this.show = true;
                this.showCover = true;
                //this.noScroll();/*显示弹窗，让页面无法上下移动*/
            }
        },
        destroyed() {
            this.hide();
            let thiz = this;
            clearTimeout(thiz.timeout);
            thiz.timeout = null;
        }
    }
</script>

<style type="text/less" lang="less" scoped>
  .window{
      .warnIcon{
        text-align: center;padding-bottom: 0.2rem;
      >img{
        width: 0.7rem;height: 0.7rem;border-radius: 50%;overflow: hidden;}
      }
      .toastText{text-align: center;font-size: 0.32rem;display: block;line-height: 170%;padding-bottom: 0.5rem;}
      .setting{
        text-align: center;width:100%;height: 1.2rem;background: #fff;position: absolute;z-index: 1;
        bottom: 0;left:0;overflow: hidden;
      button{
        margin: 0;font-size: 0.3rem;padding:0.16rem 0.62rem;display: inline-block;width: auto;line-height: 100%;
        border-radius: 1rem;height: auto;box-sizing: border-box;border: 0.02rem solid#FFD203;margin-left: 0.24rem;
      }
      .cancel{
        background: #fff;color: #636363;border: 0.02rem solid#b9b9b9;margin-left: 0;margin-right: 0.24rem;}
      }
      .closeWindow{
        width: 0.70rem;height: 0.70rem;padding: 0.22rem;position: absolute;right: 0;top:0;background: none;
        img{width: 0.26rem;height: 0.26rem}
      }
  }
  /*动画*/
  .window{
    padding:0.6rem;padding-top:0.8rem;width: calc( 100% - 2.1rem );height:auto;position: fixed;padding-bottom: 1.1rem;
    top:50%;left: 1.05rem;background: #fff;border-radius: 0.1rem;overflow: hidden;z-index: 6;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;-webkit-transform: translateY(-50%);transform: translateY(-50%);
  }
  @media screen and (min-width: 1025px) {
    .window{width:  424px;left: 50%;margin-left:-212px;}
  }
</style>
